<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        form div {
            margin:10px 0;
            border:1px dotted yellowgreen;
            padding:10px;
        }
        input:required{
            border:1px solid yellowgreen;
        }
        input:valid{
            border:1px solid green;
        }
        input:invalid{
            border:1px solid red;
        }
        input {
            outline: none;
        }
        #box {
            width:400px;
            height:400px;
            border:1px solid red;
        }
    </style>
</head>
<body >

    <div id="box" contenteditable>
        开始编辑吧！
    </div>

    <textarea id="textarea" maxlength="10" cols="30" rows="10" name="haha">大法师打发斯蒂芬</textarea>
<!-- 
    <form action="http://127.0.0.1:8080"  method="POST" name="myForm" id="form" novalidate>
        <div>
            姓名：<input type="text" name="username"  required>
            <textarea id="textarea" maxlength="10" cols="30" rows="10" name="haha">大法师打发斯蒂芬</textarea>
        </div>
        <div>
            性别：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女
        </div>
        <div>
            email：<input type="email" name="email">
        </div>
        <div>
            博客：<input type="url" name="url">
        </div>
        <div>
        </div>
        <div>
            兴趣：<input type="checkbox" name="like" value="0">划水 <input type="checkbox" name="like" value="1" checked>摸鱼 <input type="checkbox" name="like" value="2">打酱油
        </div>
        <div>
            年龄：<select name="age" id="select">
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option>23</option>
            </select>
        </div>
        <div>
            自拍：<input type="file" name="selfie"  id="file">
        </div>
        <div>
            <button type="reset">reset_btn</button>
            <input type="reset" value="reset_input">
            <input type="image" src="https://tse1-mm.cn.bing.net/th/id/OIP.aDCy6_xEcKQzitoW1Fy0XwHaEz?w=300&h=194&c=7&o=5&dpr=1.25&pid=1.7" value="sub提交">
            <button type="button" id="btn">嘻嘻</button>
        </div>
    </form> -->

    <!-- <a href="user.txt" download=gaga" contenteditable>点我  -->
        <!-- <img border="0" src="a.jpg" alt="gaga" > -->
    <!-- </a> -->

    <!-- <iframe src="./child.html" id="myFrame" ></iframe> -->

    <script>
        // var myFrame = document.getElementById('myFrame');
        // var form = document.getElementById('form'),
        //     firstEle = form.elements[0],
        //     select = document.getElementById('select'),
        //     btn = document.getElementById('btn');
        //     textarea = document.getElementById('textarea');

            // console.log(firstEle.pattern)


        // console.log(form.acceptCharset);  // 服务器能够处理的字符集，等价于html的accept-charset
        // console.log(form.action);   // 接受请求的URL，等价于html的action
        // console.log(form.elements); // 表单中所有控件的集合
        // console.log(form.enctype);  // 请求的编码类型，等价于html的nectype
        // console.log(form.method);   // 要发送的http请求类型，等价于html的method
        // console.log(form.name);   // 表单的名称，等价于html的name
        // console.log(form.reset);    // 将所有表单域重置为默认值
        // console.log(form.submit);    // 提交表单
        // console.log(form.target);    // 用于发送请求和接收响应的窗口名称，等价于html的target


        // var EventUtil = {
        //     getClipboardText:function(event) {
        //         var clipboardData = event.clipboardData || window.clipboardData;
        //         return clipboardData.getData('text');
        //     },
        //     setClipboardText:function(event, value) {
        //         if (event.clipboardData) {
        //             console.log('= =')
        //             return event.clipboardData.setData('text/plain', value);
        //         } else if(window.clipboardData) {
        //             return window.clipboardData.setData('text', value);
        //         }
        //     }
        // }

        // window.onload = function(){
        //     myFrame.contentDocument.designMode = 'on';
        // }

        setTimeout(function(){
            alert('我来了！')
            document.execCommand('bold', false);
            // document.execCommand('insertimage', false, 'https://s.cn.bing.net/th?   id=OJ.YYiBymhdI7904A&w=75&h=75&dpr=1.25&pid=MSNJVFeeds');
            // box.innerHTML += '<img src="https://s.cn.bing.net/th?id=OJ.YYiBymhdI7904A&w=75&h=75&dpr=1.25&pid=MSNJVFeeds">'
        },5000);



    </script>
    
</body>
</html>